<div class="easyui-layout" data-options="fit:true">
	<div data-options="region:'west',collapsed:false" style="width:180px">
		<div class="con"  style="-moz-user-select:none;">
			<table id="trashedCat"></table>
		</div>
	</div>
	<div data-options="region:'center'">
		<div id="tb<?php echo $uniqid;?>">
			<table cellspacing="0" cellpadding="0">
				<tbody>
				<tr>
					<td><SELECT id='trashedlabel_id' onchange="trashedSearch();" class="textbox-text validatebox-text">
						<OPTION value="0">所有标签</OPTION>
						<OPTION value="0" disabled="disabled"> --------</OPTION>
						<template v-for="(vo,index) in goods_label">
							<OPTION :value="vo.id">{{vo.name}}</OPTION>
						</template>
					</SELECT>
					</td>
					<td>
						<div class="datagrid-btn-separator"></div>
					</td>
					<td>
						<label style="margin-right: 0;"><input type="checkbox" name="trashedup" onchange="trashedSearch();"
															   class="textbox-prompt"
															   value="1"/>上架</label>
						<label style="margin-right: 0;"><input type="checkbox" name="trasheddown" onchange="trashedSearch();"
															   class="textbox-prompt"
															   value="1"/>下架</label>
						<label style="margin-right: 0;"><input type="checkbox" name="trashedis_hot" onchange="trashedSearch();"
															   class="textbox-prompt"
															   value="1"/>热卖</label>
						<label style="margin-right: 0;"><input type="checkbox" name="trashedis_new" onchange="trashedSearch();"
															   class="textbox-prompt"
															   value="1"/>新品</label>
						<label style="margin-right: 0;"><input type="checkbox" name="trashedis_top" onchange="trashedSearch();"
															   class="textbox-prompt"
															   value="1"/>精品</label>
					</td>
					<td>
						<div class="datagrid-btn-separator"></div>
					</td>
					<td>
						<div class="datagrid-btn-separator"></div>
					</td>
					<td><a href="javascript:;" onclick="trashedEdit('编辑商品');" class="l-btn l-btn-small l-btn-plain"
						   group="" ><span class="l-btn-left l-btn-icon-left"><span
							class="l-btn-text">编辑</span><span class="l-btn-icon icon-edit">&nbsp;</span></span></a></td>
					<td>
						<div class="datagrid-btn-separator"></div>
					</td>
					<td><a href="javascript:;" onclick="trashedRecycle();" class="l-btn l-btn-small l-btn-plain" group=""
					><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">还原</span><span
							class="l-btn-icon icon-reset">&nbsp;</span></span></a></td>
					<td>
						<div class="datagrid-btn-separator"></div>
					</td>
					<td><a href="javascript:;" onclick="trashedReload();" class="l-btn l-btn-small l-btn-plain" group=""
					><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">重载</span><span
							class="l-btn-icon icon-reload">&nbsp;</span></span></a></td>
					<td>
						<div class="datagrid-btn-separator"></div>
					</td>
					<td><span style="line-height:30px;">库存小于</span>
						<input id="trashedstock" style="width:50px" type="text" class="easyui-input textbox">
					</td>
					<td><span style="line-height:30px;">搜索</span>
						<input id="trashedkeywords" style="width:120px" placeholder="ID、商品名" type="text"
							   class="easyui-input textbox"></td>
					<td><span><a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-search"
								 onclick="trashedSearch()">查询</a></span></td>
					<td><span><a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-export"
								 onclick="trashedExport()">导出</a></span></td>
				</tr>
				</tbody>
			</table>
		</div>
		<div class="con"  style="-moz-user-select:none;">
			<table id="trashed"></table>
		</div>
		<div id="trasheddlg" class="easyui-dialog" style="width:720px; height:460px;" title="信息框" closed="true"></div>
	</div>
</div>

<script>
	new Vue({
		el: '#tb<?php echo $uniqid;?>',
		data: {
			goods_label: JSON.parse('<?php echo $goods_label;?>'),
		},
	});
	var trashedEdit=function(title){
		var row = $('#trashed').datagrid('getSelected');
		if (row){
			url	=	'/admin/goods/goodsedit?id='+row.id,
					$('#rightTabs').tabs('close',title);
			addTab(title,url);
		}else{
			$.messager.alert('提示','请先选择要编辑的行！','warning');
		}
	};
	var trashedRecycle=function(){
		var row = $('#trashed').datagrid('getSelected');
		if (row){
			$.messager.confirm('提示','确定还原吗？',function(r){
				if(r==true){
					$.messager.progress();
					$.post('/admin/goods/goodsrecycle', {id:row.id}, function(data){
						$.messager.progress('close');
						if(data.ret == 0){
							$.messager.show({
								title:'提示',
								msg:data.msg,
								timeout:3000,
								showType:'slide'
							});
							trashedReload();
						}else{
							$.messager.alert('提示',data.msg,'warning');
						}
					},'json');
				}
			});
		}else{
			$.messager.alert('提示','请先选择要还原的行！','warning');
		}
	};
	var trashedDelete=function(){
		var row = $('#trashed').datagrid('getSelected');
		if (row){
			$.messager.confirm('提示','确定删除吗？',function(r){
				if(r==true){
					$.messager.progress();
					$.post('/admin/goods/goodsdelete', {id:row.id}, function(data){
						$.messager.progress('close');
						if(data.ret == 0){
							$.messager.show({
								title:'提示',
								msg:data.msg,
								timeout:3000,
								showType:'slide'
							});
							trashedReload();
						}else{
							$.messager.alert('提示',data.msg,'warning');
						}
					},'json');
				}
			});
		}else{
			$.messager.alert('提示','请先选择要删除的行！','warning');
		}
	};
	var goodsupdate_status = function (id, type, status) {
		$.post('/admin/goods/updateStatus', {id: id, type:type, status:status}, function (data) {
			if (data.ret == 0) {
				$.messager.show({
					title: '提示',
					msg: data.msg,
					timeout: 3000,
					showType: 'slide'
				});
				trashedReload();
			} else {
				$.messager.alert('提示', data.msg, 'warning');
			}
		}, 'json');
	};
	var trashedReload=function(){
		$("#trashed").datagrid('reload');
	};
	var trashedSearch = function (id) {
		var height = $(window).height() - $(".top").height() - 121;//表格高度
		var width = $(window).width() - $("#leftMenu").width() - 180 - 13;//表格高度
		$("#trashed").datagrid({
			title: '商品管理',
			width: width,
			height: height,//高度
			singleSelect: true,//如果为true，则只允许选择一行
			striped: true,//是否显示斑马线效果。
			rownumbers: false,//如果为true，则显示一个行号列。
			pagination: true,//是否显示分页
			pageSize: 10,
			pageList: [10, 15, 20, 25],
			method: 'post',
			sortName: 'sortorder',
			sortOrder: 'desc',
			url: '/admin/goods/goodsGet?trashed=1',
			queryParams: {
				keywords: $('#trashedkeywords').val(),
				cat_id: id,
				label_id: $('#trashedlabel_id').val(),
				up: $("input[name='trashedup']").prop('checked'),
				down: $("input[name='trasheddown']").prop('checked'),
				is_top: $("input[name='trashedis_top']").prop('checked'),
				is_hot: $("input[name='trashedis_hot']").prop('checked'),
				is_new: $("input[name='trashedis_new']").prop('checked'),
				stock: $('#trashedstock').val()
			},
			fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck: false,
			checkOnSelect: true,
			toolbar: '#tb<?php echo $uniqid;?>',
			rowStyler: function (index, row) {
				if (row.status == '失效') {
					return 'color:#F00;font-style:italic;';
				}
			},
			columns: [[
				{field: 'id', title: 'ID', width: '6%'},
				{field: 'name', title: '名称', width: '20%'},
				{
					field: 'logo', title: 'logo', width: '6%', formatter: function (value, rowData, rowIndex) {
						if (value != '') {
							return '<img src="' + value + '?imageView2/1/w/60/h/60" style="height:60px;width:60px;">';
						}
					}
				},
				{field: 'price', title: '价格', width: '6%', sortable: true},
				{field: 'stock', title: '库存', width: '5%', sortable: true},
				{field: 'salenum', title: '销量', width: '5%', sortable: true},
				{
					field: 'status', title: '状态', width: '15%', formatter: function (value, rowData, rowIndex) {
						let status='';
						if (rowData.is_active == 1){
							status += '<div class="tlist"><span>上架：</span><div  title="是" class="switch active" onClick="goodsupdate_status('+rowData.id+', 1, 0)"><div class="circle"></div></div></div>';
						}else{
							status += '<div class="tlist"><span>上架：</span><div  title="否" class="switch" onClick="goodsupdate_status('+rowData.id+', 1, 1)"><div class="circle"></div></div></div>';
						}
						if (rowData.is_top == 1){
							status += '<div class="tlist"><span>精品：</span><div  title="是" class="switch active" onClick="goodsupdate_status('+rowData.id+', 2, 0)"><div class="circle"></div></div></div>';
						}else{
							status += '<div class="tlist"><span>精品：</span><div  title="否" class="switch" onClick="goodsupdate_status('+rowData.id+', 2, 1)"><div class="circle"></div></div></div>';
						}
						if (rowData.is_hot == 1){
							status += '<div class="tlist"><span>热卖：</span><div  title="是" class="switch active" onClick="goodsupdate_status('+rowData.id+', 3, 0)"><div class="circle"></div></div></div>';
						}else{
							status += '<div class="tlist"><span>热卖：</span><div  title="否" class="switch" onClick="goodsupdate_status('+rowData.id+', 3, 1)"><div class="circle"></div></div></div>';
						}
						if (rowData.is_new == 1){
							status += '<div class="tlist"><span>新品：</span><div  title="是" class="switch active" onClick="goodsupdate_status('+rowData.id+', 4, 0)"><div class="circle"></div></div></div>';
						}else{
							status += '<div class="tlist"><span>新品：</span><div  title="否" class="switch" onClick="goodsupdate_status('+rowData.id+', 4, 1)"><div class="circle"></div></div></div>';
						}
						return status;
					}
				},
				{field: 'sortorder', title: '排序', width: '5%', sortable: true},
				{field: 'created_at', title: '创建时间', width: '10%', sortable: true},
			]],
			onDblClickRow: function (index, field) {
				trashedEdit('编辑商品');
			}
		});
	};
	var selecttrashed = function () {
		var row = $('#trashedCat').datagrid('getSelected');
		if (row) {
			trashedSearch(row.id);
		}
	};
	var trashedCatSearch = function () {
		var height = $(window).height() - $(".top").height() - 121;
		var width = 176;
		$("#trashedCat").treegrid({
			width: width,
			height: height,//高度
			singleSelect: true,//如果为true，则只允许选择一行
			striped: true,//是否显示斑马线效果。
			rownumbers: false,//如果为true，则显示一个行号列。
			pagination: false,//是否显示分页
			pageSize: 10,
			pageList: [10, 15, 20, 25],
			method: 'post',
			idField: 'id',
			treeField: 'title',
			sortName: 'sortorder',
			sortOrder: 'desc',
			url: '/admin/goodscat/get',
			queryParams: {},
			fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck: false,
			checkOnSelect: true,

			columns: [[
				{field: 'title', title: '商品分类', width: '90%'},
			]],
			onDblClickRow: function (index, field) {
				selecttrashed();
			},
			onLoadSuccess: function (row, data) {
				$.each(data, function (i, val) {
					$('#trashedCat').treegrid('collapseAll', data[i].id)
				})
			}
		});
	};
	trashedCatSearch();
	trashedSearch();
</script>
